@supports (bottom: constant(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {
    body {
        padding-top: constant(safe-area-inset-top);
        padding-top: env(safe-area-inset-top);
        padding-left: constant(safe-area-inset-left);
        padding-left: env(safe-area-inset-left);
        padding-right: constant(safe-area-inset-right);
        padding-right: env(safe-area-inset-right);
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}
.z-overflow-hidden {
    overflow: hidden!important;
}
.z-body {
    position: relative;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
}

/* 根据header和navbar自动适应内容区高度 */
.z-header~.z-body {
    padding-top: 45px;
}

.z-navbar~.z-body {
    padding-bottom: 50px;
}
//字体
.f-12{
    font-size: 12px;
}
.f-14{
    font-size: 14px;
}
.f-15 {
    font-size: 15px;
}
.f-16{
    font-size: 16px;
}
.f-17 {
    font-size: 17px;
}
.f-18{
    font-size: 18px;
}
.f-22{
    font-size: 22px;
}

.f-bold{
    font-weight: bold;
}
.f-medium{
    font-weight:500;
}
.color-red{
    color:#EA373F;
}
.color-gray{
    color:#BCBCBC;
}
.color-black{
    color: #333;
}
.color-white{
    color: #fff;
}
.flex{
    display: flex;
}
.aligin-center{
    align-items: center;
}
.aligin-bottom{
    align-items: flex-end;
}
.self-bottom{
    align-self: flex-end;
}
.justify-center
{
    justify-content: center;
}
.justify-between{
    justify-content: space-between;
}
.justify-around{
    justify-content: space-around;
}
.justify-bottom {
    justify-content: flex-end;
}
.flex-column{
    flex-direction: column;
}
.flex-1{
    flex: 1;
}
.float-r{
    float:right;
}
.float-l{
    float: left;
}
.mr-auto{
    margin-right: auto;
}
.ml-auto{
    margin-left: auto;
}
.text-right{
    text-align: right;
}
input {
    outline: none;
}
input:focus{
     outline: none;
}

button{
    border: none;
    outline: none;
}
// 按钮样式
.btn_public {
    background:linear-gradient(-90deg,rgba(232,48,56,1) 0%,rgba(254,114,123,1) 100%);
    border-radius:5px;
    color: #fff; 
    height: 44px;
    width: 100%;
    font-size: 16px;
}
.btn_foot {
    position: fixed;
    left: 15px;
    right: 15px;
    bottom: 28px;
}
// 阴影通用
.show_public {
    margin: 0 15px;
    box-shadow: 5px 5px 20px rgba(162, 162, 162, 0.19);
    border-radius: 5px;
    background: #fff;
    margin-top: 8px;
}
.z-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    color: #fff;
    box-shadow: 5px 5px 4px rgba(26, 26, 26, 0.2);
}
.z-btn:active{
    transform: translate(1px,1px);
}
.divide-line{
    height: 10px;
    background: #F8F8F8;
}
.ellipsis-line2{
    -webkit-line-clamp:2 ;//用该属性来限定块元素内文本显示的行数
    display:-webkit-box;// 将对象作为弹性的伸缩盒子显示
 /* autoprefixer: off */
 -webkit-box-orient: vertical;
 /* autoprefixer: on */
    text-overflow:ellipsis;//使用省略号告诉用户有内容未显示
    overflow:hidden;//超出文本隐藏
}
.fade-enter-active, .fade-leave-active {
    // transition: opacity .3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}
.transform-enter-active,
.transform-leave-active {
     transition: all .3s ease;
     position: absolute;
}

   /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
.transform-enter,
.transform-leave-to {
     opacity: 0;
     transform: translateX(100%);
}
// 根据屏幕分辨率自动缩放1px边框线
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-1px {
        &::before {
            transform: scaleY(.5);
        }

    }

}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .border-1px {
        &::before {
            transform: scaleY(.3);
        }
    }
}


@counter: 4;

.loop(@i) when (@i <44) {
    .mr-@{i} {
        margin-right: @i + 0px;
    }

    .mt-@{i} {
        margin-top: @i + 0px;
    }

    .ml-@{i} {
        margin-left: @i + 0px;
    }

    .pr-@{i} {
        padding-right: @i+0px;
    } 

    .pt-@{i} {
        padding-top: @i + 0px;
    }

    .pl-@{i} {
        padding-left: @i + 0px;
    }
    .loop(@i + 2);
}

.loop(@counter);
.back{
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("../imgs/back@3x.png");
    background-size: 100% 100%;
}
.transform_90 {
    transform:rotate(-90deg);
}
.cube-input:after{
    border: none;
}
.dot{
    position: absolute;
    top: 0;
    right: 0;
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background: #ff0000;
}
.ellipsis{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
  .text-center {
      text-align: center;
  }

.no-data{
    margin: 20px auto;
    width: 91px;
    height: 91px;
    background: url("");
    background-size: 100% 100%;
}


